<template>
  <u-popup
    mode="bottom"
    v-model="showCardPopup"
    :z-index="121"
    border-radius="24"
    safe-area-inset-bottom
  >
    <view class="popup-body">
      <view class="popup-title"> 活动 </view>
      <view class="card-section">
        <view class="section-title">促销</view>
        <view class="card-item" v-for="(item, index) in cardData" :key="index">
          <view class="card-name">
            <text>赠送</text>
            <text>{{ item.name }}</text>
          </view>
          <view class="card-num">{{ "x1" }}</view>
        </view>
      </view>

      <view class="close-icon" @click="hidePopup">
        <view class="icon-box">
          <i class="iconfont icon-close"></i>
        </view>
      </view>
    </view>
  </u-popup>
</template>

<script>
export default {
  name: "",
  props: {
    popupTitle: {
      type: String,
      default: "",
    },
    cardData: {
      type: Array,
      default: [],
    },
  },
  mixins: [],
  components: {},
  data() {
    return {
      showCardPopup: false,
      showInfoIndex: -1,
      coupons: [],
    };
  },
  mounted() {
  },
  watch: {},
  computed: {},
  methods: {
    hidePopup() {
      this.showCardPopup = false;
    },
    showPopup() {
      this.showCardPopup = true;
    },
  },
};
</script>

<style lang="scss" scoped>
.popup-body {
  width: 100%;
  background-color: #ffffff;
  padding-top: 4.8vw;
  max-height: 80vh;
  position: relative;
  .popup-title {
    font-size: 32rpx;
    font-family: PingFang SC;
    font-weight: 600;
    color: #262626;
    margin-left: 4.8vw;
    padding-bottom: 4.267vw;
  }

  .card-section {
    width: 100%;
    padding-bottom: 36rpx;
    .section-title {
      font-size: 26rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #8c8c8c;
      padding: 0 36rpx 30rpx 36rpx;
    }
    .card-item {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 24rpx 36rpx;
      .card-name {
        display: flex;
        align-items: center;
        text:nth-child(1) {
          width: 56rpx;
          height: 26rpx;
          background: #fee9e6;
          border-radius: 4rpx;
          text-align: center;
          line-height: 26rpx;
          font-size: 20rpx;
          font-family: PingFang SC;
          font-weight: 400;
          color: #f1270c;
          display: inline-block;
          margin-right: 28rpx;
        }
        text:nth-child(2) {
          font-size: 24rpx;
          font-family: PingFang SC;
          font-weight: 400;
          color: #262626;
        }
      }
      .card-num {
        font-size: 24rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #262626;
      }
    }
  }

  .close-icon {
    width: 14.93vw;
    height: 14.93vw;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 11;
    display: flex;
    justify-content: center;
    align-items: center;
    .icon-box {
      width: 5.34vw;
      height: 5.34vw;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #f2f1f2;
      .iconfont {
        color: #8c8c8c;
        font-weight: 600;
        font-size: 28rpx;
      }
    }
  }
}
</style>
